<template>
  <div style="display: flex">
    <el-container>
      <div>
        <el-table
          :data="receiverForm"
          border
          stripe
          :height="curHeight"
          ref="table"
          @selection-change="handleSelectionChange"
          :row-key="getRowKeys"
          style="width: 100%;">
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55">
          </el-table-column>
          <el-table-column
            label="收货人"
            align="left"
            width="150"
            prop="consignee">
          </el-table-column>
          <el-table-column
            label="电话"
            align="left"
            width="150"
            prop="phone"
          >
          </el-table-column>
          <el-table-column
            label="收货地址"
            width="180"
            align="left"
            prop="areaName"
          >
          </el-table-column>
          <el-table-column
            label="详细地址"
            align="center"
            prop="address"
          >
          </el-table-column>
        </el-table>
      </div>
      <el-footer class="el-footerBox">
      </el-footer>
      <div style="display: flex;justify-content: flex-end;align-items: center">
        <el-button type="primary" @click="addClick">完成</el-button>
      </div>
    </el-container>
  </div>
</template>
<script>
  import utils from '../../../utils/utils.js';
  import {list as receiverList} from '@/api/receiver'
  export default {
    data() {
      return {
        pageNum: 1,
        pageSize: 20,
        total: 0,
        chooseData: [],
        curHeight: null,
        receiverForm:[]
      }
    },
    props: [
      'memberId'
    ],
    created() {

    },
    mounted() {
      this.comeIn();
      this.beforeMount();
      this.loadReceiver()
    },
    filters: {},
    methods: {
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 400//减去页面上固定高度height
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            this.curHeight = h - 400//减去页面上固定高度height
          })();
        };
      },
      //选择商品
      handleSelectionChange(val) {
        console.log(val)
        this.chooseData = val
        if (val.length > 1) {
          this.$refs.table.clearSelection()
          this.$refs.table.toggleRowSelection(val.pop())
        } else {
          this.chooseData = val.pop()
        }
      },
      //关闭删除选择
      cancelClick() {
        this.$refs.table.clearSelection()
      },
      getRowKeys(row) {
        return row.id
      },
      //选择添加商品
      addClick() {
        this.$emit('receiverClick', this.chooseData)
        this.$refs.table.clearSelection()
      },
      loadReceiver() {
        var _this = this
        let params = new URLSearchParams();
        params.append('memberId', _this.memberId)
        receiverList(params).then(response => {
          console.log(response);
          _this.receiverForm = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
        this.receiverType = true
      },
    }
  }
</script>

<style scoped>
  .el-footerBox {
    height: 30px !important;
    line-height: 30px !important;
  }
</style>
